<template>
  <div class="wallet-selection">
    <div class="header">
      <h3>{{ $t("menu.language") }}</h3>
      <button class="close-btn" @click="close">✕</button>
    </div>
    <div
      v-for="(wallet, index) in wallets"
      :key="index"
      class="wallet-item"
      @click="selectWallet(wallet)"
    >
      <div class="flex-warp  justify-start items-center">
        <img :src="wallet.icon" class="wallet-icon" />
        <span>{{ wallet.name }}</span>
      </div>

      <div class="wallet-checkmark">
        <!-- 根据是否选中，显示对号 -->
        <img
          v-if="selectedWallet === wallet.type"
          src="../assets/image/home/langright.png"
          alt=""
          class="rightimg"
        />
        <div v-else class="flaseimg"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      wallets: [
        {
          name: "English",
          type: "en",
          icon: require("../assets/image/home/en.png"),
        },
        {
          name: "中文(繁体)",
          type: "zh",
          icon: require("../assets/image/home/zh.png"),
        },
        
        // {
        //   name: "日本語",
        //   type: "ja",
        //   icon: require("../assets/image/home/ja.png"),
        // },
        // {
        //   name: "한국어",
        //   type: "ko",
        //   icon: require("../assets/image/home/ko.png"),
        // },
        // {
        //   name: "Русский",
        //   type: "ru",
        //   icon: require("../assets/image/home/ru.png"),
        // },
      ],
    };
  },
  computed: {
    ...mapState(["locale"]),
    selectedWallet: {
      get() {
        return this.locale;
      },
      set(value) {
        this.$store.dispatch("changeLocale", value);
        this.$i18n.locale = value; // 更新 i18n 的当前语言
      },
    },
  },
  methods: {
    // 选择钱包
    selectWallet(wallet) {
      this.selectedWallet = wallet.type;
      this.$i18n.locale = this.selectedWallet;
    },

    close() {
      this.$router.back();
    },
  },
};
</script>
<style lang="less" scoped>
.wallet-selection {
  padding: 20px 38px;
  text-align: center;
  color: white;
  background: #121212 !important;
  min-height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #363636;
  margin-bottom: 58px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
.wallet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 32px 0;
  padding: 36px 32px;
  // border: 2px solid #363636;
  background: #1a181b;

  border-radius: 20px;
  .rightimg {
    width: 32px;
    height: 32px;
  }
  .flaseimg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #928f93;
  }
}

.wallet-icon {
  width: 48px;
  height: 48px;
  margin-right: 28px;
}

.confirm-btn {
  width: 100%;
  height: 100px;
  background: linear-gradient(90deg, #3d66be, #d53e9b);
  border-radius: 16px;
  text-align: center;
  line-height: 100px;
  font-weight: 500;
  font-size: 30px;
  margin-top: 368px;
}
</style>
